﻿<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="FantasyWereld.Views.MainPage"
                        DataContext="{Binding Source=DefaultViewModel, RelativeSource={RelativeSource Self}}"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="using:FantasyWereld"
                        xmlns:data="using:FantasyWereld.Data"
                        xmlns:common="using:FantasyWereld.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        mc:Ignorable="d">


    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource x:Name="channelItemsViewSource"
                              IsSourceGrouped="true"
                              d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}" />

        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <common:FirstToVisibilityConverter x:Key="FirstToVisibilityConverter" />
        <common:FirstNegationToVisibilityConverter x:Key="FirstNegationToVisibilityConverter" />
        <common:IntToImageConverter x:Key="IntToImageConverter" />

        <Storyboard x:Name="FadeOpacity"
                    RepeatBehavior="1x">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="BackGroundImage">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:2"
                                      Value="0.45">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </Page.Resources>

    <Page.BottomAppBar>
        <AppBar x:Name="PageAppBar"
                Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100*" />
                    <ColumnDefinition Width="50*" />
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands"
                            Orientation="Horizontal"
                            Grid.Column="0"
                            HorizontalAlignment="Left">
                    <Button x:Name="BrowseToReviewButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource LibraryAppBarButtonStyle}"
                            Click="OnBrowseToReviewButtonClicked"
                            Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                </StackPanel>
                <StackPanel x:Name="RightCommands"
                            Orientation="Horizontal"
                            Grid.Column="1"
                            HorizontalAlignment="Right">
                    <Button x:Name="BrowseToSiteButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource GlobeAppBarButtonStyle}"
                            Click="OnBrowseToSiteButtonClicked" />
                    <Button x:Name="BrowseToForumButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource CommentAppBarButtonStyle}"
                            Click="OnBrowseToForumButtonClicked" />
                    <Button x:Name="BrowsetoFacebookButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource ShareAppBarButtonStyle}"
                            Click="OnBrowseToFacebookButtonClicked" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="15*"/>
            <ColumnDefinition Width="1351*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Image x:Name="BackGroundImage"
               Grid.RowSpan="2"
               Source="/Images/achtergrond.png"
               Stretch="UniformToFill"
               HorizontalAlignment="Right"
               Grid.ColumnSpan="2" />

        <GridView x:Name="channelGridView"
                  Padding="116,137,40,46" 
                  ItemsSource="{Binding Source={StaticResource channelItemsViewSource}}"
                  IsItemClickEnabled="True"
                  Grid.RowSpan="2"
                  Grid.ColumnSpan="2">
            
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,40,0">
                                <Button AutomationProperties.Name="Group Title"
                                    Click="Header_Click" 
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <Grid>
                                        <Image VerticalAlignment="Top"
                                            Source="{Binding Image}"
                                            Height="400"
                                            Width="240"
                                            Stretch="Fill" />
                                        <StackPanel VerticalAlignment="Top"
                                                    HorizontalAlignment="Left">
                                            <Image Source="/Assets/Nieuw.png"
                                                   Stretch="None"
                                                   Visibility="{Binding ShowNew, Converter={StaticResource BooleanToVisibilityConverter}}" />
                                        </StackPanel>
                                        <TextBlock Text="{Binding Title}"
                                                Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}"
                                                Style="{StaticResource TitleTextStyle}"
                                                FontSize="28"
                                                Margin="6 6 0 0"
                                                VerticalAlignment="Top"
                                                HorizontalAlignment="Left"
                                                Height="394"
                                                Width="230"
                                                Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <TextBlock Text="{Binding NewsTitle}"
                                                Style="{StaticResource ItemTextStyle}"
                                                FontWeight="Bold"
                                                FontSize="20"
                                                Margin="6 30 0 0"
                                                VerticalAlignment="Top"
                                                HorizontalAlignment="Left"
                                                Height="40"
                                                MaxHeight="40"
                                                Width="230"
                                                TextWrapping="Wrap"
                                                Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <TextBlock Text="{Binding NewsDate}"
                                                Style="{StaticResource BodyTextStyle}"
                                                FontSize="10"
                                                Margin="6 68 0 0"
                                                VerticalAlignment="Top"
                                                HorizontalAlignment="Left"
                                                Height="332"
                                                Width="230"
                                                Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <TextBlock Text="{Binding NewsContent}"
                                                Style="{StaticResource BodyTextStyle}"
                                                FontSize="16"
                                                Margin="6 88 0 0"
                                                VerticalAlignment="Top"
                                                HorizontalAlignment="Left"
                                                Height="312"
                                                Width="230"
                                                TextWrapping="Wrap"
                                                Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <StackPanel Height="400"
                                                Width="240"
                                                Orientation="Horizontal"
                                                Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" >
                                            <Image VerticalAlignment="Bottom"
                                                HorizontalAlignment="Left"
                                                Margin="6 0 0 6"
                                                Stretch="None"
                                                Width="120"
                                                Source="{Binding NewsIndex, Converter={StaticResource IntToImageConverter}}" />
                                        </StackPanel>
                                        <StackPanel VerticalAlignment="Top"
                                                Height="30"
                                                Width="Auto"
                                                Margin="1 1 1 1">
                                            <TextBlock Text="{Binding Count}"
                                                    Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}"
                                                    Visibility="{Binding Title, Converter={StaticResource FirstNegationToVisibilityConverter}}"
                                                    Style="{StaticResource TitleTextStyle}"
                                                    FontSize="28"
                                                    Margin="0 6 6 0"
                                                    VerticalAlignment="Top"
                                                    HorizontalAlignment="Right" />
                                        </StackPanel>
                                    </Grid>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

        <!-- Vertical scrolling list only used when snapped -->
        <ListView x:Name="itemListView"
                  AutomationProperties.AutomationId="ItemListView"
                  AutomationProperties.Name="Grouped Items"
                  Visibility="Collapsed"
                  Margin="0,130,0,0"
                  Padding="10,0,0,60"
                  ItemsSource="{Binding Source={StaticResource channelItemsViewSource}}"
                  ItemTemplate="{StaticResource Standard80ItemTemplate}"
                  SelectionMode="None"
                  IsSwipeEnabled="false" Grid.ColumnSpan="2" Grid.RowSpan="2">

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                <Button AutomationProperties.Name="Group Title"
                                        Click="Header_Click"
                                        Style="{StaticResource TextPrimaryButtonStyle}">
                                    <Grid>
                                        <Image Source="{Binding Image}"
                                               Height="400"
                                               Width="240"
                                               Stretch="Fill" />
                                        <TextBlock Text="{Binding Title}"
                                                   Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}"
                                                   Style="{StaticResource TitleTextStyle}"
                                                   FontSize="28"
                                                   Margin="6 6 0 0"
                                                   VerticalAlignment="Top"
                                                   HorizontalAlignment="Left"
                                                   Height="394"
                                                   Width="230"
                                                   Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <TextBlock Text="{Binding NewsTitle}"
                                                   Style="{StaticResource ItemTextStyle}"
                                                   FontWeight="Bold"
                                                   FontSize="20"
                                                   Margin="6 30 0 0"
                                                   VerticalAlignment="Top"
                                                   HorizontalAlignment="Left"
                                                   Height="40"
                                                   MaxHeight="40"
                                                   Width="230"
                                                   TextWrapping="Wrap"
                                                   Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <TextBlock Text="{Binding NewsDate}"
                                                   Style="{StaticResource BodyTextStyle}"
                                                   FontSize="10"
                                                   Margin="6 68 0 0"
                                                   VerticalAlignment="Top"
                                                   HorizontalAlignment="Left"
                                                   Height="332"
                                                   Width="230"
                                                   Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <TextBlock Text="{Binding NewsContent}"
                                                   Style="{StaticResource BodyTextStyle}"
                                                   FontSize="16"
                                                   Margin="6 88 0 0"
                                                   VerticalAlignment="Top"
                                                   HorizontalAlignment="Left"
                                                   Height="312"
                                                   Width="230"
                                                   TextWrapping="Wrap"
                                                   Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}" />
                                        <StackPanel Height="400"
                                                    Width="240"
                                                    Orientation="Horizontal"
                                                    Visibility="{Binding Title, Converter={StaticResource FirstToVisibilityConverter}}">
                                            <Image VerticalAlignment="Bottom"
                                                   HorizontalAlignment="Left"
                                                   Margin="6 0 0 6"
                                                   Stretch="None"
                                                   Width="120"
                                                   Source="{Binding NewsIndex, Converter={StaticResource IntToImageConverter}}" />
                                        </StackPanel>
                                        <StackPanel VerticalAlignment="Top"
                                                    Height="30"
                                                    Width="Auto"
                                                    Margin="1 1 1 1">
                                            <TextBlock Text="{Binding Count}"
                                                       Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}"
                                                       Visibility="{Binding Title, Converter={StaticResource FirstNegationToVisibilityConverter}}"
                                                       Style="{StaticResource TitleTextStyle}"
                                                       FontSize="28"
                                                       Margin="0 6 6 0"
                                                       VerticalAlignment="Top"
                                                       HorizontalAlignment="Right" />
                                        </StackPanel>
                                    </Grid>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <!-- Back button and page title -->
        <Grid Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       Text="{StaticResource AppName}"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Grid.Column="1"
                       IsHitTestVisible="false" />
            <!-- SearchBox Control that provides suggestions to the user, focus given to control by keybaord by FocusOnKeyboardInput being set to true -->
            <SearchBox x:Name="SearchBox"
                       x:Uid="SearchBox"
                       Grid.Column="1"
                       Height="35"
                       Width="35"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Center"
                       Margin="0 0 20 0"
                       SearchHistoryEnabled="True"
                       PlaceholderText="Doorzoek FantasyWereld" 
                       GotFocus="SearchBox_GotFocus"
                       LostFocus="SearchBox_LostFocus"
                       SuggestionsRequested="SearchBoxEventsSuggestionsRequested"
                       QuerySubmitted="SearchBoxEventsQuerySubmitted"
                       FocusOnKeyboardInput="True" />
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="channelGridView"
                                                       Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="100,139,90,0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="channelGridView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
